<template>
  <div class='ranking-list-content mt30'>
    <div class="main-tab-content">
      <div class='fl main-tab-title'>
        <a href="http://blog.csdn.net/superbirds" title="榜单">榜单</a>
      </div>
    </div>
    <div class='mt30 rank-box'>
      <dl class='dl' v-for='item in topList' :key=item.id>
        <dt class='dt posi-rel'>
          <div class='fl'>
            <img :src=item.coverImgUrl>
            <a href="" class='u-cover-4 rank-cover msk' :title=item.name></a> 
          </div>
          
          <div class='ml30 disinblock dt-right-wrap'>
            <a href="" :title=item.name>
              <h3>{{ item.name }}</h3>
            </a>
            <div class="mt10 btn">
              <a href="" class='bill-icon icon-play' title='播放'></a>
              <a href="" class='bill-icon icon-collect' title='收藏'></a>
            </div>
          </div>
        </dt>
        <dd class='dd'>
          <ul>
            <li class='bill-list' v-for='(data, i) in item.tracks' :key=data.id>
              <span class='bill-no fs18 ml20 fl'>{{ (i + 1) }}</span>
              <a href="" class='bill-content fl' :title=data.name>
                {{ data.name }}
              </a>
              <div class="oper fr">
                <a href="" class='fl bill-dd-icon bill-play' title='播放'></a>
                <a href="" class='fl bill-dd-icon bill-add' title='添加到播放列表'></a>
                <a href="" class='fl bill-dd-icon bill-collect' title='收藏'></a>
              </div>
            </li>
          </ul>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rankingList',
  data() {
    return {
      topList: [],
      topListDetail: [],
      ids: []
    }
  },
  mounted() {
    this._getTopList().then(() => {
      this._getPlayListDetail()
    })
  },
  methods: {
    async _getTopList() {
      let res = await this.$api.getTopList()
      this.topList = res.data.list.splice(0, 3)
      this.topList.forEach(item => {
        this.ids.push(item.id)
      })
    },
    _getPlayListDetail() {
      this.ids.forEach((item, i) => {
        let params = {
          id: item,
          s: 100,
          timestamp: new Date().valueOf()
        }
        this.$api.getPlayListDetail(params).then(res => {
          let topListDetail = res.data.playlist.tracks.slice(0,10)
          this.topList[i].tracks = topListDetail;
        })
      })
    },
  }
}
</script>

<style lang='less' scoped>
 .ranking-list-content {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    .rank-box {
      height: 600px;
      background-color: #f4f4f4;
      border: 1px solid #d4d4d4;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .dl {
        width: calc((100% - 5px) / 3);
        border-right: 1px solid #cdcdcd;
        &:last-child {
          border-right: none;
        }
        .dt {
          height: 100px;
          padding-left: 20px;
          padding-top: 20px;
          img {
            width: 80px;
            height: 80px;
          }
          .rank-cover {
            width: 80px;
            height: 80px;
            top: 20px;
            left: 20px;
          }
          .dt-right-wrap {
            width: 100px;
            height: 80px;
            .bill-icon {
              background: url(../assets/sprite.png) no-repeat 0 9999px;
              display: block;
              float: left;
              width: 22px;
              height: 22px;
              margin-right: 10px;
              text-indent: -9999px;
              &.icon-play {
                background-position: -267px -205px;
                &:hover {
                  background-position: -267px -235px;
                }
              }
              &.icon-collect {
                background-position: -300px -205px;
                &:hover {
                  background-position: -300px -235px;
                }
              }
            }
          }
        }
        .dd {
          height: 480px;
          .bill-list {
            width: 100%;
            height: 48px;
            line-height: 48px;
            &:hover {
              .oper {
                display: inline-block;
              }
              .bill-content {
                width: 180px;
                height: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-wrap: normal;
              }
            }
            &:nth-child(2n + 1) {
              background-color: #e8e8e8;
            }
            .bill-no {
              display: inline-block;
              width: 40px;
              height: 40px;
            }
            &:nth-child(-n+3) {
              span {
                color: #c10d0c;
              }
            }
            .bill-content {
              width: 300px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-wrap: normal;
            }
            .oper {
              width: 100px;
              margin-top:12px;
              display: none;
              .bill-dd-icon {
                background: url(../assets/sprite.png) no-repeat 0 9999px;
                width: 22px;
                height: 22px;
                margin-right: 10px;
                text-indent: -9999px;
                &.bill-play {
                  background-position: -267px -205px;
                  &:hover {
                    background-position: -267px -235px;
                  }
                }
                &.bill-add {
                  background: url(../assets/icon.png) no-repeat 0 9999px;
                  background-position: 2px -695px;
                  &:hover {
                    background-position: -20px -695px;
                  }
                }
                &.bill-collect {
                  background-position: -300px -205px;
                  &:hover {
                    background-position: -300px -235px;
                  }
                }
              }
            }
          }
        }
      }
    }
 }
</style>